<template>
	<view class="publish-box">
		<view class="public-reload" @click="reloadCommunity">
			<li class="iconfont icon-xingqiu"></li>
		</view>
		<view class="unread-tip" @click="toUnreadDetail">
			<view v-if="unreadCommunityList.length > 0" class="unread-num">{{unreadCommunityList.length}}</view>
			<li class="iconfont icon-xiaoxi"></li>
		</view>
		<view class="tip">
			所有美好都值得被记录
		</view>
		<view class="public-tool" @click="openPublish">
			<li class="iconfont icon-publish"></li>
			<view class="public-text">
				发布
			</view>
		</view>
		<eject-drawer mode="bottom" :visible="publishFlag" @close="publishFlag = false" drawerWidth="100%"
			drawerHeight="100%">
			<view class="public-detail">
				<view class="option">
					<view class="" @click="canclePublish">
						取消
					</view>
					<view class="publish-btn d-c" @click="publishComunity">
						发表
					</view>
				</view>
				<textarea class="textarea" v-model="Content" placeholder="这一刻的想法......" maxlength="2000" />
				<view class="upload-list">
					<view v-for="(item,index) in ImgList" :key="index" class="upload-image-box">
						<view class="icon-delete-btn" @click="deleteImage(index)">
							<li class="iconfont icon-delete"></li>
						</view>
						<image :src="item" class="upload-image"></image>
					</view>
					<view class="upload-btn d-c" v-if="ImgList.length < 6" @click="uploadImage">
						<li class="iconfont icon-upload"></li>
					</view>
				</view>
			</view>
		</eject-drawer>
	</view>
</template>

<script>
	import ejectDrawer from '@/components/common/eject-drawer'
	export default {
		components: {
			ejectDrawer
		},
		data() {
			return {
				publishFlag: false,
				ImgList: [],
				Content: "",
				publishObj: {},
				sender: this.$store.state.sender,
				unreadCommunityList: []
			}
		},
		mounted() {
			this.getUnreadCommunityList();
		},
		methods: {
			// 获取社区未读消息列表
			getUnreadCommunityList() {
				let model = {
					receiverId: this.sender.Id
				}
				this.$Request.post(this.$Config.APIURL + "/api/getUnreadCommunityList", model).then(res => {
					if (res?.code == 200) {
						this.unreadCommunityList = res?.data || [];
					}
				});
			},
			// 跳转社区消息列表页
			toUnreadDetail() {
				let hasNew = this.unreadCommunityList.length > 0 ? 1 : 0;
				this.$Common.navigateTo("/community/communityMessage", {
					hasNew
				});
				this.unreadCommunityList = [];
			},
			// 重新获取社区列表
			reloadCommunity() {
				this.$emit("reloadCommunity")
			},
			// 打开发布面板
			openPublish() {
				this.publishFlag = true;
			},
			// 取消发布面板
			canclePublish() {
				this.publishFlag = false
			},
			// 删除图片
			deleteImage(index) {
				this.ImgList.splice(index, 1);
			},
			// 上传图片
			uploadImage() {
				let count = 6 - this.ImgList.length;
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// uni.showLoading({
						// 	title: '上传图片中...',
						// 	mask: true
						// })
						let tempFilePaths = res.tempFilePaths;
						for (var i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: this.$Config.APIURL + '/api/uploadImage', //此处换上你的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									if (uploadFileRes.statusCode == 200) {
										let data = JSON.parse(uploadFileRes.data);
										let item = this.$Config.APIURL +
											`/api/getImage?url=${data[0].path}`;
										this.ImgList.push(item);
									} else {
										this.$Common.tipMsg("上传图片失败，请稍后再试")
									}
								},
								fail: function(res) {
									console.log('fail', res);
								},
							})
						}

					}
				});
			},
			// 发布社区内容
			publishComunity() {
				if (!this.sender.Id > 0) {
					this.$Common.tipMsg("请登录后再发布");
					return;
				}
				if (!this.Content.trim()) {
					this.$Common.tipMsg("内容不得为空");
					return;
				}
				this.publishObj.PublishId = this.sender.Id;
				this.publishObj.AvatarUrl = this.sender.Avatar;
				this.publishObj.PublishName = this.sender.Name;
				this.publishObj.Content = this.Content;
				this.publishObj.ImgList = JSON.stringify(this.ImgList);
				uni.showLoading({
					title: '发布中'
				});
				this.$Request.post(this.$Config.APIURL + "/api/publishComunity", this.publishObj).then(res => {
					if (res?.code == 200) {
						uni.hideLoading()
						this.$Common.tipMsg(res?.message);
						setTimeout(() => {
							this.publishFlag = false;
							this.Content = '';
							this.ImgList = [];
							this.publishObj = {};
							this.$emit("reloadCommunity")
						}, 1000)
					} else {
						this.$Common.tipMsg(res?.message);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.public-detail {
		width: 100%;
		height: 100%;
		padding: 20rpx;
	}

	.upload-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;

		.upload-image-box {
			height: 200rpx;
			width: 200rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			.upload-image {
				height: 100%;
				width: 100%;
			}

			.icon-delete-btn {
				position: absolute;
				bottom: 0;
				left: 0;
				background-color: #fff;
				z-index: 10;

				.icon-delete {
					font-size: 40rpx;
				}
			}

		}

		.upload-btn {
			height: 200rpx;
			width: 200rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.upload-btn {
			background-color: #F7F7F7;

			li {
				font-size: 60rpx;
			}
		}
	}

	.option {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 70rpx;

		.publish-btn {
			width: 120rpx;
			height: 100%;
			padding: 20rpx;
			background-color: $primary-color;
			color: #fff;
			border-radius: 10rpx;
		}
	}

	.textarea {
		font-size: 30rpx;
		line-height: 36rpx;
		word-wrap: break-word;
		overflow-y: auto;
		width: 96%;
		height: 140rpx;
		background-color: #fff;
		margin: 20rpx 0;
		text-align: left;
	}

	.publish-box {
		height: 100rpx;
		width: 100%;
		background-color: $primary-color;

		position: relative;

		.tip {
			width: 100%;
			height: 100%;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
		}

		.public-reload {
			position: absolute;
			top: 20rpx;
			left: 20rpx;

			.icon-xingqiu {
				font-size: 60rpx;
				color: #ff9900;
			}
		}

		.unread-tip {
			position: absolute;
			top: 30rpx;
			left: 120rpx;

			.unread-num {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: -12rpx;
				right: -20rpx;
				height: 40rpx;
				width: 40rpx;
				border-radius: 50%;
				padding: 10rpx;
				text-align: center;
				background: #EE593C;
				color: #fff;
				font-size: 12px;
				transform: scale(0.7);
			}

			.icon-xiaoxi {
				font-size: 40rpx;
				color: #fff;
			}
		}

		.public-tool {
			color: #fff;
			width: 100rpx;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.icon-publish {
				width: 100%;
				font-size: 42rpx;
			}

			.public-text {
				font-size: 24rpx;
				width: 100%;
			}
		}
	}
</style>
